<template>
  <gui-page>
    <!-- 页面主体 -->
    <template v-slot:gBody>
      <view>
        <form @submit="submit">
          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">团队信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">团队名称</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.shopName" placeholder="请输入团队信息" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">所在城市</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.city" @click="selectCity"
                  placeholder="请选择城市" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">详细地址</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.address" placeholder="请输入详细地址" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系方式</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.phone" placeholder="请输入联系方式" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系人</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.shopUser" placeholder="联系人" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">添加菜品图片</text>
              <view class="gui-form-body my-upload-box">
                <view class="image-item" v-for="item in uploadImageList" :key="item">
                  <image style="width: 100%; height: 100%;" :src="baseUrl + item" mode="scaleToFill"></image>
                  <!-- 删除图标 -->
                  <text @click="delImage(item)" class="gui-icons gui-block gui-color-gray gui-text">&#xe7a5;</text>
                </view>
                <view class="upload-image" @click="selectImage"></view>
                <!-- <view @click="uploadImage" v-if="uploadImageList.length" class="my-btn">
                  <button type="primary" size="mini">上传</button>
                </view> -->
              </view>
            </view>
          </view>



          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">团队业务</text>
          </view>
          <view style="height:28rpx;"></view>




          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">


            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label">接单类型</text>
              <view class="gui-form-body" style="padding:20rpx 0;">
                <checkbox-group name="name6" class="gui-flex gui-rows gui-wrap" @change="checkCategorys">
                  <label class="gui-check-item" v-for="x in categorys">
                    <checkbox :value="x.id"></checkbox>
                    <text class="gui-text gui-primary-color">{{x.categoryName}}</text>
                  </label>

                </checkbox-group>
              </view>
            </view>


            <!-- <view style="padding:15rpx 0;">
							<textarea v-model="formData.shop_fanwei" placeholder="营业范围..."
								class="gui-textarea gui-bg-gray gui-dark-bg-level-1 gui-padding"
								style="width:690rpx;"></textarea>
						</view> -->

          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">

            <view style="padding:15rpx 0;">
              <textarea v-model="formData.description" placeholder="团队描述..."
                class="gui-textarea gui-bg-gray gui-dark-bg-level-1 gui-padding" style="width:690rpx;"></textarea>
            </view>

          </view>
          <view class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
            <button type="default" class="gui-button gui-bg-primary gui-noborder" style="width:100%;" formType="submit">
              <text class="gui-icons gui-color-white gui-button-text">提交审核</text>
            </button>
          </view>
          <view style="height:60rpx;"></view>
        </form>
      </view>
    </template>
  </gui-page>
</template>
<script>
  import {
    log
  } from 'console';
  export default {
    data() {
      return {
        // 基础路径
        baseUrl: uni.gRequest.file,
        // 表单数据存储
        formData: {},
        yyzz: '',
        sfzzm: '',
        sfzfm: '',
        dptp: '',
        categorys: [],
        uploadImageList: []
      }
    },
    onLoad(e) {
      var user = uni.gRequest.checkLogin();

      if (user) {
        this.formData.userId = user.userId
      }

      if (e.id) {
        this.formData.id = e.id;
        // this.initData();
      }

      var self = this;
      uni.gRequest.get('category/list').then(result => {
        self.categorys = result.rows;
      });



    },
    async onShow() {
      var user = uni.gRequest.checkLogin();
      if (user) {
        const res = await uni.gRequest.get('shop/list', {
          userId: user.userId
        })
        // console.log('res', res);
        res.data.length ? this.formData = res.data[0] : '';
        // console.log(this.formData);
        var selectCity = uni.getStorageSync("selectCity");
        var location = JSON.parse(uni.getStorageSync("selectLocation") || '{}');
        if (selectCity && location.address) {
          // console.log(location, selectCity);
          this.formData.city = selectCity;
          this.formData.address = location.address
          // uni.removeStorageSync("selectCity")
          // console.log(this.formData);
        }
      };

    },
    methods: {
      delImage(item) {
        this.uploadImageList = this.uploadImageList.filter(i => i !== item)
      },

      // 选择图片
      selectImage() {
        var self = this;
        uni.chooseMedia({
          success(res) {
            res.tempFiles.forEach(x => {
              var userInfo = uni.getStorageSync('userInfo');
              var token = '';
              if (userInfo) {
                token = userInfo.token;
              }

              uni.uploadFile({
                url: uni.gRequest.server +
                  'file/upload',
                filePath: x.tempFilePath,
                header: {
                  'Authori-zation': token
                },
                name: 'file',
                success(res) {
                  console.log(res);
                  const shortImageDate = JSON.parse(res.data);
                  // console.log(shortImageDate.url);
                  // self.uploadImageList.push(shortImageDate.url)
                  self.uploadImageList.push(shortImageDate.fileName)
                },
                fail(err) {
                  console.log('err', err);
                }
              })

            })

          }
        })
      },
      // 上传图片
      // uploadImage() {
      //   const self = this
      //   console.log(123456, this.uploadImageList);

      // },
      initData() {
        var self = this;
        uni.gRequest.get('shop/model', {
          id: this.formData.shop_id
        }).then(result => {
          let sPath = uni.gRequest.server.replace('/app/', '');
          result.data.shop_dptp = uni.gRequest.server.replace('/app/', '') + result.data.shop_dptp;

          self.formData = result.data;
          self.yyzz = sPath + self.formData.shop_yyzz;
          self.sfzzm = sPath + self.formData.shop_sfzzm;
          self.sfzfm = sPath + self.formData.shop_sfzfm;
          self.dptp = self.formData.shop_dptp;

        });
      },
      selectImg: function(x) {

        var self = this;

        uni.chooseImage({
          count: 1,
          success: (res) => {
            //self[x] = res.tempFilePaths[0];


            uni.uploadFile({
              url: uni.gRequest.server + 'file/upload',
              filePath: res.tempFilePaths[0],
              name: 'file',
              success: (uploadResult) => {
                self[x] = JSON.parse(uploadResult.data).url;
                self.formData["shop_" + x] = JSON.parse(uploadResult.data)
                  .fileName
              }

            })
          }
        })
      },
      checkCategorys(e) {

        this.formData.categorys = e.detail.value.join(',');
        // console.log('123123', this.formData.categorys)
      },
      // 表单提交
      submit: function(e) {

        if (!this.formData.shopName) {
          uni.showToast({
            icon: 'none',
            title: "请输入团队名称"
          });
          return;
        }
        if (!this.formData.city) {
          uni.showToast({
            icon: 'none',
            title: "请选择店铺所在城市"
          });
          return;
        }
        if (!this.formData.address) {
          uni.showToast({
            icon: 'none',
            title: "请输入详细地址"
          });
          return;
        }
        if (!this.formData.phone) {
          uni.showToast({
            icon: 'none',
            title: "请输入联系方式"
          });
          return;
        }
        if (!this.formData.shopUser) {
          uni.showToast({
            icon: 'none',
            title: "请输入联系方式"
          });
          return;
        }
        if (!this.formData.categorys) {
          uni.showToast({
            icon: 'none',
            title: "请选择接单类型"
          });
          return;
        }
        if (!this.formData.description) {
          uni.showToast({
            icon: 'none',
            title: "请输入店铺描述"
          });
          return;
        }

        const imageListString = this.uploadImageList.join(',')
        // console.log("imageListString", imageListString);
        const newFormData = {
          ...this.formData,
          dishImage: imageListString
        }
        // console.log("newFormData", newFormData);
        // console.log('formData', this.formData);
        // delete newFormData.statusEnum
        // delete newFormData.id
        // uni.gRequest.post("shop", JSON.stringify(this.formData)).then(x => {
        uni.gRequest.post("shop", newFormData).then(x => {
          uni.showToast({
            title: "提交成功、请等待管理员审核"
          });

          uni.navigateBack();
        });
      },
      selectCity() {
        uni.navigateTo({
          url: '/pages/com/selectCity?type=2'
        })
      }
    }
  }
</script>
<style scoped>
  .image-item {
    position: relative;
  }

  .image-item text {
    color: black;
    position: absolute;
    top: 5rpx;
    right: 5rpx;
    font-size: 35rpx;
  }

  .my-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18rpx;
  }

  .my-upload-box {
    display: flex;
    flex-wrap: wrap;
  }

  .my-upload-box view {
    width: 28%;
    height: 150rpx;
    margin-right: 20rpx;
  }

  .my-upload-box .upload-image {
    position: relative;
    border: 1rpx gray dotted;
  }

  .my-upload-box .upload-image::before {
    content: "+";
    font-size: 80rpx;
    font-weight: 50;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .gui-idcard-main {
    margin: 25rpx;
  }

  .gui-idcard-desc {
    line-height: 56rpx;
    font-size: 26rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .gui-idcard-text {
    line-height: 1.8em;
    margin-top: 30rpx;
  }

  .gui-idcard-items {
    padding: 50rpx;
    border-radius: 10rpx;
    margin-top: 15rpx;
  }

  .gui-idcard-items-image {
    width: 380rpx;
  }
</style>
